<template>
    <div v-transfer-dom>
        <popup v-model="companyProp"
               width="100%"
               ref="companyProp"
               @on-hide="propHide">
            <div class="company-content-wrap">
                <div class="company-content"
                     v-for="(item,index) in theModel"
                     :key="index">
                    <p class="company-name"
                          @click="selectCompanyFn(item)">
                        {{item.deptName}}
                    </p>
                </div>
            </div>
        </popup>
    </div>
</template>
<script>
import { TransferDom, Popup } from 'vux'
export default {
    name: 'activityCompany',
    directives: {
        TransferDom
    },
    data () {
        return {
            companyProp: false,
            theModel: [],
            userInfo: {}
        }
    },
    components: {
        Popup
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.getCompany()
    },
    props: {
        selectCompany: {
            type: Function
        },
        companyPropShow: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        companyPropShow (newVal) {
            this.companyProp = newVal
        }
    },
    methods: {
        getCompany () {
            var params = {
                'allowPaging': false,
                'business': 'GetDeparts',
                'data': {
                    'deptId': this.userInfo.deptid,
                    'type': '0'
                },
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': '81ACEFD7ACEE9BCDE572882A244E72B0',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.theModel = res.data.data
                    }
                })
        },
        selectCompanyFn (item) {
            this.selectCompany(item)
        },
        propHide () {
            this.$parent.companyPropShow = false
        }
    }
}
</script>
<style scoped>
.company-nav {
    min-height: 40px;
    background: rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    overflow-x: scroll;
}
.company-nav ul {
    display: flex;
    align-items: center;
}
.company-nav li {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    line-height: 28px;
    white-space: nowrap;
}
.company-nav li p {
    color: #419df7;
    padding: 0 5px;
}
.company-nav li:last-child p {
    color: #333;
}
.company-nav span {
    margin-right: 4px;
}
.company-content-wrap {
    height: calc(100% - 40px);
    overflow-y: scroll;
}
.company-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.company-name {
    line-height: 24px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #333;
}
</style>
